<template>
   <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list
v-model:loading="loading"
:finished="finished"
finish-text="没有更多了"
@load="onLoad"
class="goods-list"
>
<van-card
v-for="item in goodsList"
:key="item.id"
:num="item.num"
:tag="categoryName"
:price="item.price"
:desc="item.sell_point"
:title="item.name"
class="goods-item"
@click="onGoodsInfo(item.id)"
>
<template #thumb> <img :src="item.image" class="goods-item-img" /> </template>
</van-card>
</van-list>
</van-pull-refresh>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'
import { getGoodsList } from '@/api/login'
import { showNotify } from 'vant'
const route = useRoute()
const categoryName = route.query.category_name
const router = useRouter()
const props = defineProps(['category_id'])
let finished = ref(false)
let loading = ref(false)
let refreshing = ref(false)
let lastId = ref(0)
let goodsList = ref(null)
// let categoryName = route.query.category_name
onMounted(async () => {})
const onGoodsInfo = (id) => {
this.$router.push({ name: 'goodsinfo', params: { id: id } });
}
const onLoad = async () => {
loading.value = true
const data1 = {
category_id: props.category_id,
last_id: lastId.value
 }
console.log('data1', data1)
const res = await getGoodsList(data1)
loading.value = false
refreshing.value = false
if (res.data.length > 0) {
if (goodsList.value != null) {
goodsList.value = goodsList.value.concat(res.data)
 } else {
goodsList.value = res.data
 }
lastId.value = goodsList.value[goodsList.value.length - 1].id
 } else {
if (goodsList.value == null) {
showNotify({
message: '此分类⽆商品！',
type: 'danger'
 })
router.go(-1)
 }
finished.value = true
 }
}
const onRefresh = () => {
// 清空列表数据
finished.value = false
lastId.value = 0
goodsList.value = []
onLoad()
}
</script>

<style lang="scss" scoped>
.goods-list {
margin-bottom: 56px;
}
.goods-item {
--van-card-thumb-size: 175px;
--van-card-price-color: red;
.goods-item-img {
height: 175px;
width: auto;
 }
}
</style>